<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>睿云 让生活更美好！</title>
    <link rel="stylesheet" href="../../../../static/css/element.css" th:href="@{/css/element.css}">
    <link rel="stylesheet" href="../../../../static/css/global.css" th:href="@{/css/global.css}"/>
    <link rel="stylesheet" href="../../../../static/css/main.css" th:href="@{/css/main.css}"/>
    <link rel="stylesheet" href="../../../../static/css/myelement.css" th:href="@{/css/myelement.css}"/>
    <script src="../../../../static/js/vue.js" th:src="@{/js/vue.js}"></script>
    <script src="../../../../static/js/element.js" th:src="@{/js/element.js}"></script>
</head>
<body>
<div id="app">
    <div class="main-content" v-cloak>
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">员工账号</h1>
            <div class="z-pop_question">
                <el-popover
                        ref="popoverq"
                        placement="bottom-start"
                        width="400"
                        trigger="hover">
                    <p class="z-jiao">
                        1. 账号权限分为【数据权限】和【功能权限】
                        数据权限是指某个账号可以看到那些地区的客户，那些客户
                        功能权限是指后台所有功能入口的可见性、可编辑、可惯性<br/>
                        2. 首先要先在角色权限模块下，创建功能权限分组，比如：业务员角色，仓库管理员角色，财务角色。然后账号关联
                        某个角色，就拥有该角色下的所有功能权限<br/>
                        3. 每个员工账号生成后，会自动生成对应唯一的邀请码，新客户注册系统时，可以选择是否填写邀请码。当新客户注册时，
                        输入某个内部员工的邀请，系统会记录这个关联性，表示可能是由这个内部员工通过自己的宣传带来的新客户
                        <a href="javascript:;">查看更多帮助</a>
                    </p>
                </el-popover>
                <i v-popover:popoverq class="el-icon-question"></i>
            </div>
            <div class="breadcrumb"><a href="javascript: top.location.reload();">首页</a><span>/</span>系统<span>/</span>账号管理</div>
        </div><!-- 页面头部 end -->

        <div class="list-content">
            <!--条件筛选-->
            <div class="content_item_filter clearfix" :class="[hasfilterMore?'content_filter_more':'']">
                <div class="input-select fl btn-radid_none">
                    <div class="filter-form filter-form-one clearfix">
                        <el-input placeholder="账号/姓名/手机号" v-model="conditions['loginName#name#mobile'].value" clearable class="minW40 z_input-holder"></el-input>
                        <el-select placeholder="身份" v-model="conditions.identity.value" clearable class="z_select-holder">
                            <el-option
                                    v-for="identity in identityList"
                                    :key="identity.value"
                                    :label="identity.name"
                                    :value="identity.value">
                            </el-option>
                        </el-select>
                        <el-select placeholder="状态" v-model="conditions.state.value" clearable class="z_select-holder">
                            <el-option v-for="state in stateList"
                                       :key="state.value"
                                       :label="state.name"
                                       :value="state.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class='filter-form filter-form-more clearfix' v-show="filterMore"></div>
                    <div class="filter-operate">
                        <div class="filter-more" @click="toggleMoreSearch" v-show="hasfilterMore"><i :class="[filterMore?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
                        <el-tooltip class="item" content="查询" placement="bottom-start">
                            <el-button icon="el-icon-search" @click="handleQuery"></el-button>
                        </el-tooltip>
                        <el-tooltip class="item" content="清空" placement="bottom-start">
                            <el-button icon="el-extend-clean" @click="handleClear"></el-button>
                        </el-tooltip>
                    </div>
                </div>
                <div class="filter-btn fr">
                    <el-button type="primary" @click="handleAdd">新增员工账号</el-button>
                </div>
            </div>

            <!--主体表格-->
            <div class="z-tables">
                <el-table ref="multipleTable" :data="managerList" v-loading="loading" style="width: 100%;">
                    <el-table-column fixed label="序号" type="index" class-name="z-opt_btn"></el-table-column>
                    <el-table-column fixed label="登录账号" min-width="140">
                        <template scope="scope">
                            <span>{{scope.row.loginName}}</span>
                            <label class="z-creater" v-if="scope.row.superManager == '1'">管理员</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" min-width="120"></el-table-column>
                    <el-table-column prop="mobile" label="手机号" min-width="140"></el-table-column>
                    <el-table-column label="职位" min-width="100">
                        <template slot-scope="scope">
                            <el-tooltip placement="bottom-start" popper-class="table-tooltip">
                                <div slot="content">{{ scope.row.position }}</div>
                                <div class="over-omitted">{{ scope.row.position }}</div>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deptName" label="部门" min-width="100"></el-table-column>
                    <el-table-column prop="identity" label="身份" :formatter="identityFormatter" min-width="100"></el-table-column>
                    <el-table-column prop="state" label="状态" :formatter="stateFormatter" min-width="100"></el-table-column>
                    <el-table-column fixed="right" label="邮箱" min-width="180" class-name="table-operate-td">
                        <template slot-scope="scope">
                            <div class="table-info">{{ scope.row.email }}</div>
                            <div class="table-operate">
                                <template v-if="scope.row.superManager != '1'">
                                    <template v-if="scope.row.state != true">
                                        <el-button type="primary" @click="handleChangeState(scope.$index, scope.row)">启用</el-button>
                                    </template>
                                    <template v-else>
                                        <el-button type="primary" @click="handleChangeState(scope.$index, scope.row)">停用</el-button>
                                    </template>
                                    <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button type="primary" @click="handleResetPassword(scope.$index, scope.row)">重置密码</el-button>
                                    <!--<el-button type="primary" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                                </template>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!--分页-->
            <div class="grid-content">
                <div class="bg-purple-light">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pageSizeList"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNum">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 重置密码弹出框 -->
        <el-dialog title="重置密码" :visible.sync="dialogVisible">
            <el-form :model="passwordForm" :rules="rules" ref="password-form" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="password">
                    <template slot="label">
                        登录密码
                        <el-popover ref="popoverqsur" placement="bottom-start" width="440" trigger="hover">
                            <p class="z-jiao">重置管理员登录密码为初始密码，可修改为其他密码。</p>
                        </el-popover>
                        <i v-popover:popoverqsur class="el-icon-question"></i>
                    </template>
                    <el-input v-model="passwordForm.password"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="resetPassword">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script src="../../../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../../../../static/js/jquery.nestable.js" th:src="@{/js/jquery.nestable.js}"></script>
<script th:inline="javascript">
    app = new Vue({
        el: "#app",
        data: {
            loading: true,
            identityList: [{"name": "内勤", "value": "1"}, {"name": "业务员", "value": "2"}, {"name": "老板", "value": "3"}, {"name": "司机", "value": "4"}],
            stateList: [{"name": "启用", "value": true}, {"name": "停用", "value": false}],
            valueId: '',
            valueState: '',
            managerList: [],
            tableAllCheck: false,  // table 下方批量操作全选
            hasfilterMore: false,  // 列表是否拥有更多筛选条件
            filterMore: false,  // 列表更多筛选条件是否展示
            conditions: {
                "loginName#name#mobile": {
                    "operation": "ORLIKE",
                    "value": undefined
                },
                "identity": {
                    "operation": "EQ",
                    "value": undefined
                },
                "state": {
                    "operation": "EQ",
                    "value": undefined
                }
            },
            dialogVisible: false,
            pageSizeList: [5, 10, 20, 50],
            totalNum: 0,
            currentPage: 1, //当前页码数
            pageSize: 10,
            passwordForm: {
                id: '',
                password: '111111'
            },
            rules: {
                password: [
                    {required: true, message: "请输入登录密码", trigger: 'blur'},
                    {min: 6, max: 20, message: '密码长度6到20个字符', trigger: 'blur'}
                ]
            },
        },
        created: function () {
            this.queryList();
        },
        methods: {
            identityFormatter: function (row, column, cellValue, position) {
                for (let identity of this.identityList) {
                    if (identity.value === cellValue) {
                        return identity.name;
                    }
                }
            },
            stateFormatter: function (row, column, cellValue, position) {
                return cellValue ? '启用' : '停用';
            },
            handleSizeChange: function (val) {
                this.pageSize = val;
                this.queryList();
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.queryList();
            },
            handleQuery() {
                this.currentPage = 1;
                this.queryList();
            },
            handleClear() {
                this.conditions['loginName#name#mobile'].value = undefined;
                this.conditions.identity.value = undefined;
                this.conditions.state.value = undefined;
            },
            handleAdd() {
                window.location.href = "/backstage/permission/manager/toadd";
            },
            handleChangeState(index, row) {
                let self = this;
                let opt = row.state ? '停用' : '启用';
                self.$confirm('确认要' + opt + '此管理员账号?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    row.state = !row.state;
                    $.ajax({
                        url: "/backstage/permission/manager/edit",
                        type: "POST",
                        data: JSON.stringify(row),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: opt + '管理员账号成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                                self.handleQuery();
                            } else {
                                // 如果修改状态失败，则还原状态
                                row.state = !row.state;
                                self.$message({
                                    message: opt + '管理员账号失败',
                                    type: 'warning',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        }
                    });
                });
            },
            // 编辑
            handleEdit: function (index, row) {
                window.location.href = '/backstage/permission/manager/toedit/' + row.uuid;
            },
            handleResetPassword(index, row) {
                this.passwordForm.id = row.uuid;
                this.passwordForm.password = '111111';
                this.dialogVisible = true;
            },
            resetPassword() {
                let self = this;
                $.ajax({
                    url: "/backstage/permission/manager/resetPassword",
                    type: "POST",
                    data: {id: self.passwordForm.id, password: self.passwordForm.password},
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.$message({
                                message: '重置管理员登录密码成功',
                                type: 'success',
                                customClass: 'message-center',
                                duration: 1500,
                                onClose: function () {
                                    self.dialogVisible = false;
                                }
                            });
                        } else {
                            self.$message({
                                message: '重置管理员登录密码失败',
                                type: 'warning',
                                customClass: 'message-center',
                                duration: 1500,
                                onClose: function () {
                                    self.dialogVisible = false;
                                }
                            });
                        }
                    }
                });
            },
            // 删除
            handleDelete(index, row) {
                let self = this;
                self.$confirm('确认要删除此管理员信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    $.ajax({
                        url: "/backstage/permission/manager/delete",
                        type: "POST",
                        data: JSON.stringify([row.uuid]),
                        contentType: "application/json;charset=UTF-8",
                        dataType: "json",
                        success: function (data) {
                            if (data && data.returnCode === 1) {
                                self.$message({
                                    message: '删除管理员信息成功',
                                    type: 'success',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                                self.handleQuery();
                            } else {
                                self.$message({
                                    message: '删除管理员信息失败',
                                    type: 'warning',
                                    customClass: 'message-center',
                                    duration: 1500,
                                });
                            }
                        },
                        error: function () {
                            self.loading = false;
                            self.$message({
                                message: '出错了，请请稍后再试或联系管理员.',
                                type: 'error',
                                customClass: 'message-center',
                                duration: 1500,
                            });
                        }
                    });
                });
            },
            queryList() {
                let self = this;
                self.loading = true;
                let queryMessage = {
                    "queryPage": self.currentPage,
                    "pageShow": self.pageSize,
                    "queryParams": self.conditions,
                    "sortMap": {
                        "uuid": "desc"
                    }
                };
                $.ajax({
                    url: "/backstage/permission/manager/list",
                    type: "POST",
                    data: JSON.stringify(queryMessage),
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (data) {
                        if (data && data.returnCode === 1) {
                            self.managerList = data.returnMessage;
                            self.totalNum = data.pager.totalNum;
                        }
                        self.loading = false;
                    }
                });
            },
            handleCommand(command) {
                this.$message('click on item ' + command);
            },
            // 列表批量操作2-批量导出
            handleCommand2(command) {
                this.$message('click on item ' + command);
            },
            tableAllCheckFn(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row, this.tableAllCheck)
                    })
                }
            },
            toggleMoreSearch() {
                this.filterMore = !this.filterMore;
            },
        }
    });
</script>
</html>